<template>
	<view class="uni-calendar-item__weeks-box" :class="{
		'uni-calendar-item--disable':weeks.disable,
		'uni-calendar-item--isDay':(calendar.fullDate === weeks.fullDate) && weeks.isDay,
		'uni-calendar-item--checked':(calendar.fullDate === weeks.fullDate) && readOnlyChecked ,
    'uni-calendar-item--init-checked':(calendar.fullDate === weeks.fullDate) && isRangeInit ,
		'uni-calendar-item--before-checked':weeks.beforeMultiple,
		'uni-calendar-item--multiple': weeks.multiple,
		'uni-calendar-item--after-checked':weeks.afterMultiple,
    'uni-calendar-item--extra-deliverStatus-yes': weeks.extraInfo && weeks.extraInfo.deliveryStatus === 2,
		'uni-calendar-item--extra-deliverStatus-no': weeks.extraInfo && weeks.extraInfo.deliveryStatus === 1,
		}"
	 @click="choiceDate(weeks)">
		<view class="uni-calendar-item__weeks-box-item">
			<text v-if="selected&&weeks.extraInfo&&!weeks.extraInfo.deliveryStatus" class="uni-calendar-item__weeks-box-circle"></text>
			<text class="uni-calendar-item__weeks-box-text" :class="{
				'uni-calendar-item--isDay-text': weeks.isDay,
				'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
				'uni-calendar-item--isDay-checked-readyOnly':(calendar.fullDate === weeks.fullDate) && weeks.isDay && readOnlyChecked,
				'uni-calendar-item--checked':(calendar.fullDate === weeks.fullDate) && !weeks.isDay && readOnlyChecked,
        'uni-calendar-item--init-checked':(calendar.fullDate === weeks.fullDate) && isRangeInit,
				'uni-calendar-item--before-checked':weeks.beforeMultiple,
				'uni-calendar-item--multiple': weeks.multiple,
				'uni-calendar-item--after-checked':weeks.afterMultiple,
				'uni-calendar-item--disable':weeks.disable,
				}">{{weeks.date}}</text>

			<text v-if="!lunar&&!weeks.extraInfo && weeks.isDay" class="uni-calendar-item__weeks-lunar-text" :class="{
				'uni-calendar-item--isDay-text':weeks.isDay,
				'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
				'uni-calendar-item--before-checked':weeks.beforeMultiple,
				'uni-calendar-item--multiple': weeks.multiple,
				'uni-calendar-item--after-checked':weeks.afterMultiple,
				}">今天</text>
        <!-- 开始 -->
      <text v-if="!lunar&&!weeks.extraInfo && weeks.beforeMultiple && weeks.multiple" class="uni-calendar-item__weeks-lunar-text" :class="{
				'uni-calendar-item--isDay-text':weeks.isDay,
				'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
				'uni-calendar-item--before-checked':weeks.beforeMultiple,
				'uni-calendar-item--multiple': weeks.multiple,
				'uni-calendar-item--after-checked':weeks.afterMultiple,
				}">开始</text>
        <!-- 结束 -->
        <text v-if="!lunar&&!weeks.extraInfo && weeks.afterMultiple && weeks.multiple" class="uni-calendar-item__weeks-lunar-text" :class="{
				'uni-calendar-item--isDay-text':weeks.isDay,
				'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
				'uni-calendar-item--before-checked':weeks.beforeMultiple,
				'uni-calendar-item--multiple': weeks.multiple,
				'uni-calendar-item--after-checked':weeks.afterMultiple,
				}">结束</text>
        <!--  -->
			<text v-if="lunar&&!weeks.extraInfo" class="uni-calendar-item__weeks-lunar-text" :class="{
				'uni-calendar-item--isDay-text':weeks.isDay,
				'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
				'uni-calendar-item--before-checked':weeks.beforeMultiple,
				'uni-calendar-item--multiple': weeks.multiple,
				'uni-calendar-item--after-checked':weeks.afterMultiple,
				'uni-calendar-item--disable':weeks.disable,
				}">{{weeks.isDay?'今天': (weeks.lunar.IDayCn === '初一'?weeks.lunar.IMonthCn:weeks.lunar.IDayCn)}}</text>
        <!-- 自定义 -->
			<text v-if="weeks.extraInfo&&weeks.extraInfo.info" class="uni-calendar-item__weeks-lunar-text" :class="{
				'uni-calendar-item--extra':weeks.extraInfo.info&&!weeks.extraInfo.deliveryStatus,
				'uni-calendar-item--isDay-text':weeks.isDay,
				'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
        'uni-calendar-item--isDay-checked-readyOnly':calendar.fullDate === weeks.fullDate && weeks.isDay && readOnlyChecked,
				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
				'uni-calendar-item--before-checked':weeks.beforeMultiple,
				'uni-calendar-item--multiple': weeks.multiple,
				'uni-calendar-item--after-checked':weeks.afterMultiple,
				'uni-calendar-item--disable':weeks.disable,
				}">{{weeks.extraInfo.info}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			weeks: {
				type: Object,
				default() {
					return {}
				}
			},
			calendar: {
				type: Object,
				default: () => {
					return {}
				}
			},
			selected: {
				type: Array,
				default: () => {
					return []
				}
			},
			lunar: {
				type: Boolean,
				default: false
      },
      readOnly: {
        type: Boolean,
        default: false
      },
      isRangeInit: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      readOnlyChecked() {
        if(this.readOnly) {
          if(this.weeks.extraInfo && this.weeks.extraInfo.deliveryStatus) {
            return true
          }
          if(this.weeks.isDay) {
            return true
          }
          return false
        }
        if(this.weeks.isDay) {
          return false
        }
        return true
      }
    },
		methods: {
			choiceDate(weeks) {
        // console.log(weeks, this.lunar)
        const newWeeks = Object.assign(weeks)
        if(new Date(this.weeks.beforeMultiple).getTime() > new Date(this.weeks.afterMultiple).getTime()) {
          newWeeks.afterMultiple = this.weeks.beforeMultiple
          newWeeks.beforeMultiple = this.weeks.afterMultiple
        }
        // console.log('newWeeks:', newWeeks)
				this.$emit('change', newWeeks)
      },
		}
	}
</script>

<style lang="scss" scoped>
	.uni-calendar-item__weeks-box {
		// flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
    margin: 5rpx;
    width: 90rpx;
    height: 90rpx;
	}

	.uni-calendar-item__weeks-box-text {
		font-size: $uni-font-size-base;
		color: $uni-text-color;
	}

	.uni-calendar-item__weeks-lunar-text {
		font-size: $uni-font-size-sm;
		color: $uni-text-color;
	}

	.uni-calendar-item__weeks-box-item {
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 80rpx;
		height: 80rpx;
	}

	.uni-calendar-item__weeks-box-circle {
		position: absolute;
		top: 5px;
		right: 5px;
		width: 8px;
		height: 8px;
		border-radius: 8px;
		background-color: $uni-color-error;

	}

	.uni-calendar-item--disable {
		// background-color: rgba(249, 249, 249, $uni-opacity-disabled);
		color: $uni-text-color-disable;
	}

	.uni-calendar-item--isDay-text {
    color: $uni-color-primary;
    font-size: $uni-font-size-sm;
    font-size: 20rpx;
	}

	.uni-calendar-item--isDay {
		color: $uni-color-primary;
    opacity: 0.8;
    font-size: $uni-font-size-sm;
		// color: #fff;
  }
  .uni-calendar-item--isDay-checked-readyOnly {
    color: #fff;
  }

	.uni-calendar-item--extra {
		color: $uni-color-error;
		opacity: 0.8;
  }
  .uni-calendar-item--extra-deliverStatus-yes {
    color: #ffffff;
    opacity: 0.8;
    background-color: $font-color-disabled;
    border-radius: 50%;
  }
  .uni-calendar-item--extra-deliverStatus-no {
    color: #ffffff;
    opacity: 0.7;
    background-color: $font-color-spec;
    border-radius: 50%;
  }

	.uni-calendar-item--checked {
		background-color: $uni-color-primary;
		color: #fff;
    opacity: 0.8;
    border-radius: 50%;
  }
  .uni-calendar-item--init-checked {
    background-color: transparent;
    color: $uni-text-color;
    opacity: 1;
  }

	.uni-calendar-item--multiple {
		background-color: $uni-color-primary;
		color: #fff;
    opacity: 0.8;
    border-radius: 50%;
	}
	.uni-calendar-item--before-checked {
		background-color: #409EFF;
    color: #fff;
    border-radius: 50%;
	}
	.uni-calendar-item--after-checked {
		background-color: #409EFF;
    color: #fff;
    border-radius: 50%;
	}
</style>
